<template>
    <UxDialog :visible="value" title="" @close="$emit('input', false)">
        <div class="profile" v-if="detail">
            <h3 v-text="profile.title"></h3>

            <div class="profile-row">
                <h4>
                    <strong>Country of origin</strong>
                    <span>The country you're shipping from</span>
                </h4>
                <p>
                    <b style="width: 380px" v-text="profile.origin_country_iso"></b>
                </p>
            </div>

            <div class="profile-row">
                <h4>
                    <strong>Origin zip code</strong>
                    <span>Where do you ship packages from</span>
                </h4>
                <p>
                    <b style="width: 380px" v-text="profile.origin_postal_code"></b>
                </p>
            </div>

            <div class="profile-row">
                <h4>
                    <strong>Processing time</strong>
                    <span>Once a buyer has placed their order,<br />
                        how long does it take <br />you to prepare, package, and
                        <br />put it in the mail?
                    </span>
                </h4>
                <p>
                    <b style="width: 380px">Custom range</b>
                    <b style="
                            width: 80px;
                            margin-right: 18px;
                            text-align: center;
                        " v-text="profile.min_processing_time"></b>
                    -
                    <b style="width: 80px; margin: 0 18px; text-align: center" v-text="profile.max_processing_time"></b>
                    {{ profile.processing_time_unit }}
                </p>
            </div>

            <hr />

            <div class="profile-row profile-row2" v-for="item in destination" :key="item.destination_country_iso">
                <h4 v-text="getCountryName(item.destination_country_iso)"></h4>
                <p>
                    <span>
                        <em>Shipping service</em>
                        <b>Other</b>
                    </span>
                    <span>
                        <em>Delivery time</em>
                        <b v-text="item.min_delivery_days"></b>
                    </span>
                    <i>-</i>
                    <span>
                        <em>Business days</em>
                        <b v-text="item.max_delivery_days"></b>
                    </span>
                </p>

                <p>
                    <span>
                        <em>What you'll charge</em>
                        <b>Fixed price</b>
                    </span>
                    <span>
                        <em>One item</em>
                        <b>$ {{ item.primary_cost }} </b>
                    </span>
                    <i>-</i>
                    <span>
                        <em>Additional item</em>
                        <b>$ {{ item.secondary_cost }} </b>
                    </span>
                </p>
            </div>

            <hr />

            <div class="profile-row">
                <h4>Profile name</h4>
                <p><b v-text="profile.title" style="width: 380px"></b></p>
            </div>
        </div>
        <div class="profile-error" v-else-if="error">
            <span v-text="error"></span>
            <button @click="getDetail()">reload</button>
        </div>
        <UxLoading v-else />
    </UxDialog>
</template>
<script>
export default {
    name: "SynchronizeShipping",
    props: ["value", "product"],
    data () {
        return {
            detail: null,
            profile: null,
            destination: null,
            error: '',
        };
    },

    watch: {
        value (newval, oldval) {
            newval && this.getDetail()
        }
    },
    methods: {
        getCountryName (ios) {
            let base_country = {
                US: "United States (USA)",
                GB: "United Kingdom (UK)",
                AU: "Australia",
                CA: "Canada",
                IT: "Italy",
                FR: "France",
                DE: "Germany",
            };
            return base_country[ios] || "Everywhere else";
        },
        async getDetail () {

            if (this.detail) {
                return
            }

            this.error = ''
            this.$http(
                "UserStore.getEtsyShippingDetail/" + this.product
            ).then((response) => {
                if (response.code === 0) {
                    this.detail = response.data || null;
                    this.profile = (this.detail || {}).profile_json;
                    this.destination = (this.detail || {}).destination_json || [];
                } else {
                    this.error = response.msg || 'Failed to load etsy etsy shipping detail, please reload again.'
                }
            });
        }
    },
};
</script>
<style lang="scss" scoped>
.loading {
    position: relative !important;
    width: 776px;
    height: calc(100vh - 152px);
    z-index: initial !important;
}
.profile-error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 776px;
    height: calc(100vh - 152px);

    span {
        font-size: 16px;
        line-height: 18px;
    }

    button {
        margin-top: 8px;
        width: 80px;
        height: 32px;
    }
}
.profile {
    width: 776px;
    min-height: calc(100vh - 152px);
    box-sizing: border-box;
    padding: 32px 32px 48px;
    position: relative;
    &::v-deep .el-loading-mask {
        z-index: 0;
    }

    h3 {
        font-size: 28px;

        font-weight: normal;
        color: #000000;
        line-height: 32px;
        padding-bottom: 12px;
    }

    .profile-row {
        display: flex;
        margin-top: 32px;
        h4 {
            flex: 1;
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            line-height: 18px;
            strong {
                display: block;
            }
            span {
                display: block;
                margin-top: 8px;
                font-size: 14px;
                color: #555555;
                line-height: 24px;
                font-weight: normal;
            }
        }
        p {
            width: 380px;
            display: flex;
            flex-wrap: wrap;
            line-height: 38px;

            font-size: 14px;

            font-weight: 400;
            color: #000000;

            span {
                display: block;
                white-space: nowrap;

                em {
                    display: block;
                    font-size: 12px;
                    font-weight: normal;
                    color: #000000;
                    line-height: 14px;
                    font-weight: bold;
                }

                b {
                    margin-top: 10px;
                    display: block;
                }

                & + span {
                    margin-left: 14px;
                }
            }

            i {
                padding-top: 24px;
                width: 20px;
                text-align: center;
            }

            b {
                height: 38px;
                background: #f6f6f6;
                border-radius: 4px;
                line-height: 38px;
                box-sizing: border-box;
                padding: 0 8px;
                font-weight: normal;
                white-space: nowrap;
            }
        }
    }

    .profile-row2 {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        h4 {
            position: absolute;
            left: 0;
            top: 0;
        }

        p {
            span {
                width: 90px;
            }
            span:first-child {
                flex: 1;
            }
        }

        p + p {
            margin-top: 16px;
        }
    }

    hr {
        margin-top: 48px;
        border: none;
        border-top: 1px solid #dcdcdc;
        margin-bottom: 12px;

        & + .profile-row {
            margin-top: 48px;
        }
    }
}
</style>
